<script setup lang="ts">
import mapIcon from '@/assets/largescreen/ditumoxing-icon.png';

const router = useRouter();
const goHomeHandler = () => {
  router.push('/index');
};
</script>

<template>
  <div class="map-btn" @click="goHomeHandler">
    <img :src="mapIcon" alt="" class="map-icon" />
    <div>返回首页</div>
  </div>
</template>

<style scoped lang="scss">
.map-btn {
  z-index: 10;
  cursor: pointer;
  position: absolute;
  min-width: 6.305rem;
  height: 1.7237rem;
  background-size: 100% 100%;
  font-weight: 800;
  color: #fff;
  box-sizing: border-box;
  right: 28%;
  top: 16%;
  background: linear-gradient(180deg, #004db9 0%, #01347b 48%, #014cb5 100%) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  border: 0.1875rem solid #0a4db7;
  font-family: YouSheBiaoTiHei;

  .map-icon {
    width: 1.25rem;
    height: 0.875rem;
  }
}
</style>
